﻿@model IEnumerable<ArbabTravelsERP.Models.GridBaseModel>

@*@Styles.Render("~/Content/datatableCss")
    @Scripts.Render("~/bundles/datatableJs")*@

<script src="~/js/DataTable/jquery-1.11.3.min.js"></script>
<script src="~/js/DataTable/jquery.dataTables.js"></script>
<script src="~/js/DataTable/dataTables.bootstrap.js"></script>
<link href="~/css/DataTableCss/dataTables.bootstrap.css" rel="stylesheet" />

<script type="text/javascript">
    $(document).ready(function () {
        $('#common-grid').DataTable();
    });

</script>

@*<style>
        /*th, td {
            padding-left: 10px;
        }*/

        th {
            height: 40px;
        }

        div.dataTables_wrapper {
            width: 1050px;
        }
    </style>*@

@*<script type="text/javascript">
        var Chechekbox = "";
        var count = 0;
        var fixedColumns = 3;

        $(document).ready(function () {

            $('#cbSelectAll').click(function (event) {
                if (this.checked) {
                    $('table.DTFC_Cloned td :checkbox.case').each(function () {
                        this.checked = true;
                        if (($("#hdnStatus").val()).indexOf(this.id) < 0)
                            Chechekbox += this.id + " , ";
                    });
                } else {
                    $('table.DTFC_Cloned td :checkbox.case').each(function () {
                        this.checked = false;
                        Chechekbox = Chechekbox.replace(this.id + " ,", "");
                    });
                }
                $("#hdnStatus").val(Chechekbox);
                count = ($("#hdnStatus").val()).split(" ,").length - 1;
                $("#lblCount").text("Selected Count: " + count + " / " + table.rows().data().length);
            });

            $(".cbSelectAll").click(function () {
                debugger;
                if ($("table.DTFC_Cloned td :checkbox.case").length == $("table.DTFC_Cloned td :checkbox.case:checked").length) {
                    $(".case").prop("checked", true);
                } else {
                    $(".case").prop("checked", false);
                }

                if (this.checked && ($("#hdnStatus").val()).indexOf(this.id) < 0) {
                    Chechekbox += this.id + " , ";
                } else {
                    Chechekbox = Chechekbox.replace(this.id + " ,", "");
                }
                $("#hdnStatus").val(Chechekbox);
                count = ($("#hdnStatus").val()).split(" ,").length - 1;
                $("#lblCount").text("Selected Count: " + count + " / " + table.rows().data().length);
            });

            $('#common-grid').on('page.dt', function () {
                $('.case').each(function () {
                    if (($("#hdnStatus").val()).indexOf(this.id) > -1) {
                        this.checked = true;
                    }
                    else {
                        this.checked = false;
                    }
                });
                $(".cbSelectAll").prop("checked", false);
                if ($("table.DTFC_Cloned td :checkbox.case").length == $("table.DTFC_Cloned td :checkbox.case:checked").length) {
                    $(".cbSelectAll").prop("checked", true);
                } else {
                    $(".cbSelectAll").prop("checked", false);
                }

            });


            //DataTable Configuration Start ------------------------------------

            // for date time sorting -- should be use before configuring datatable.
            $.fn.dataTable.moment('DD-MMM-YYYY hh:mm A');

            var table = $('#common-grid').DataTable({
                "scrollY": "300px",
                "scrollX": true,
                "scrollCollapse": true,
                "sScrollXInner": '@tableWidth',
                "paging": true,
                //responsive: true,
                //"info": false,
                "dom": '<"top"i><"top"p>rt<"bottom"p><"clear">',
                "columnDefs": [{ "targets": 0, "orderable": false }],
                "aaSorting": [], // remove default sorting
                "bAutoWidth": false // auto width of columns
            });


            new $.fn.dataTable.FixedColumns(table, {
                leftColumns: 0
            });

            $('#common-grid_wrapper .top:nth-child(1)').addClass('col-sm-6');
            $('#common-grid_wrapper .top:nth-child(2)').addClass('col-sm-6');

            //DataTable Configuration End ------------------------------------


            //$("#lblCount").text("Selected Count: " + count + " / " + table.rows().data().length);

            //filter on Datatable ------------------------------
            //note : DataTable filters applicable if field with selector id is present on the page/view.
            $('#DataTableFLSFilter').on('change', function () {
                //column number starts from 0, Allocated To column is at 9th index
                table
                    .columns(9)
                    .search(this.value)
                    .draw();
            });

            //-------------------------------------------------
        });

    </script>*@


<div class="panel-body" style="overflow-y:auto;">
    @{int srNum = 1;}

    <input type="hidden" id="hdnStatus" name="hdnStatus" />

    @* pre-defined width is set on columns in dataTable.override.css*@

    <table id="common-grid" class="datable-grid table-striped" cellspacing="0" width="100%">
        <thead>
            <tr>

                <th class="select-all-col"><input type="checkbox" id="cbSelectAll" class="cbSelectAll"><label>Select All</label></th>

                <th class="lead-code-col"></th>
                @*<th class="cust-name-col"></th>*@
            </tr>
        </thead>
        <tbody>
            @foreach (var docDetail in Model)
            {

                <tr>

                    <td class="select-all-col"><input type='checkbox' name='chksel' id='@docDetail.REGISTRATION_NO' class='case' value=@docDetail.REGISTRATION_NO /> </td>

                    <td class="lead-code-col">
                        <div class="form-group col-md-12">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <div class="image col-md-12">
                                        @Html.Raw(string.Format("<img src=\"{0}\" alt=\"Image\" width='100px' height='100px' />", (@docDetail.USER_IMAGE_PATH)));

                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class=" col-md-12 profile">
                                        <a href="#">View Full Profile</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5 search-result">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <h4>@docDetail.CANDIDATE_NAME</h4>
                                    </div>
                                </div>
                                <br />
                                Designation : @docDetail.DESIGNATION
                                <br />
                                Highest Education : @docDetail.HIGHEST_EDUCATION
                                <br />
                                TotalExperience : @docDetail.TOTAL_WORK_EXPERIENCE
                                <br />
                                Source : @docDetail.SOURCE_NAME
                                <br />
                                Industry : @docDetail.INDUSTRY
                            </div>
                            <div class="col-md-5">
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <h4></h4>
                                    </div>
                                </div>
                                <br />
                                Age : @docDetail.AGE
                                <br />
                                Current Location : @docDetail.CURRENT_LOCATION
                                <br />
                                Phone : @docDetail.CONTACT_NO
                                <br />
                                Email : @docDetail.USER_EMAIL
                            </div>
                        </div>
                        @*@docDetail.CANDIDATE_NAME
                            <br />
                            Designation : @docDetail.DESIGNATION
                            <br />
                            Highest Education : @docDetail.HIGHEST_EDUCATION
                            <br />
                            TotalExperience : @docDetail.TOTAL_WORK_EXPERIENCE
                            <br />
                            Source : @docDetail.SOURCE_NAME
                            <br />
                            Industry : @docDetail.INDUSTRY*@

                    </td>

                    @*<td class="cust-name-col">
                            Age : @docDetail.AGE
                                <br />
                                Current Location : @docDetail.CURRENT_LOCATION
                                <br />
                                Phone : @docDetail.CONTACT_NO
                                <br />
                                Email : @docDetail.USER_EMAIL
                                <br />
                        </td>*@

                </tr>

                srNum++;
            }
        </tbody>

    </table>
</div>
